//todo —— React中的组件分类 => 有状态组件和无状态组件

// 1. 无状态组件
//todo 无状态组件通过函数方式表示,函数式组件
//!! 无状态组件  函数式组件
import React from 'react'
import ReactDom from 'react-dom'
import './index.css'//样式引入

function App() {
  return (
    <h1 className='app'>我是无状态组件</h1>
  )
}

ReactDom.render(<App />, document.getElementById("root"))

// *——————————————————————————————————————————————————————————————*
//todo —— 无状态组件值改变页面不会跟着渲染

function App() {

  var count = 0
  setInterval(() => {
    count++
    console.log('count', count)
  },1000)
  return (
    //!! count不会随着变化而变化
    <h1 className='app'>{count}</h1>
  )
}

ReactDom.render(<App />, document.getElementById("root"))
//todo *——————————————————————————————————————————————————————————————*

// 2. 有状态组件

//todo —— App就是有状态的组件
class App extends React.Component {

  //! state属性(在组件内修改数据使用state)  => constructor中定义
  // 有状态组件一定要在constructor调用super，然后传入props

//todo —— 核心是通过setState驱动状态变化
  //! 1. 修改this.state
  //! 2. setState可以触发render方法的执行

  constructor(props) {
    //? 必须调用父类构造函数，不然拿不到this
    super(props);

    this.state = {
      count: 0
    }

    setInterval(() => {
      //* 使用setState方法改值
      this.setState({
        // count: ++this.state.count
        count: this.state.count+1
      })
    },1000)
  }

  render() {
    const {count} = this.state
    return  <h1 className='app'>{count}</h1>
  }
}

ReactDom.render(<App />, document.getElementById("root"))
